<template>
  <div id="tmpl">
    <!-- 实现图片详情和缩略图 -->
    <div id="desc">
      <!--图片详情- 标题部分-->
      <div class="title">
        <h4>{{info.title}}</h4>
        <p>
          {{info.add_time | date('YYYY-MM-DD HH:mm:ss')}}   {{info.click}}次浏览
        </p>
        <p class="line"></p>
      </div>
      <div class="mui-content">
  
        <ul class="mui-table-view mui-grid-view mui-grid-9">
  
          <li v-for="(item, index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
            <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
          </li>
        </ul>
      </div>
      <!--图片详情- 摘要部分-->
      <p v-html="info.content"></p>
      <!-- 评论组件 -->
      <div id="comment">
        <comment :id="id"></comment>
      </div>
    </div>
  </div>

</template>
<script>
//引入评论子组件
import comment from "../subcom/comment.vue";
import { Toast } from "mint-ui";
export default {
  components: {
    comment
  },
  data() {
    return {
      id: this.$route.params.id,
      info: {},
      list: []
    };
  },
  created() {
    this.getinfo();
    this.getimgs();
  },
  methods: {
    getinfo() {
      var url = `${this.$common.apidomain}/api/getimageInfo/${this.id}`;
      this.$http.get(url).then(res => {
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        this.info = res.body.message[0];
      });
    },
    //获取缩略图数据
    getimgs() {
      var url = `${this.$common.apidomain}/api/getthumimages/${this.id}`;
      this.$http.get(url).then(res => {
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        //cue-preview组件要求的数据含宽高(w,h)响应的数据没有宽高,需要自己添加
        res.body.message.forEach(item => {
          var img = document.createElement("img");
          img.src = item.src;
          img.onload = function() {
            item.h = img.height;
            item.w = img.width;
          };
        });
        this.list = res.body.message;
      });
    }
  }
};
</script>
<style scoped>
/* 图片详情 */
#desc {
  padding: 10px;
}
#desc h4 {
  color: #0094ff;
}
#desc .title p {
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}
#desc .title .line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 缩略图 */
.mui-content,
.mui-content ul {
  background-color: #fff;
}

.mui-grid-view.mui-grid-9 {
  border: 0;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}
</style>
